<template>
	<view class="container">
		<view class="card-box">
			<view class="card-box-title">下属部门</view>
			<view class="card-box-content">
				<view @click="toPage('safe?id='+item.id)" v-for="(item, index) in childDept" :key="index" class="card">
					<view class="title flex-row">
						<view class="name">{{ item.fullname }}</view>
					</view>
					<view class="item">
						<text>员工总数：{{ item.user_num || 0 }}人</text>
						<text>已签订协议：{{ item.sign_num || 0 }}人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card-box">
			<view class="card-box-title">本部门</view>
			<view class="card-box-content">
				<view v-for="(item, index) in localDept" :key="index" class="card">
					<view class="title flex-row">
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="item">
						<text>职位：{{ item.name }}</text>
						<text>状态：{{ item.is_sign ? '已签订协议' : '未签订协议' }}</text>
					</view>
					<view v-if="!item.is_sign" class="btn">催办</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			id: '',
			childDept: [],
			localDept: []
		}
	},
	onLoad(option){
		this.id = option.id;
		this.getSafeDutyList();
	},
	methods: {
		// 跳转
		toPage(url){
			uni.navigateTo({url});
		},
		// 安全责任清单：下级部门
		getSafeDutyList(){
			let _this = this;
			uni.showLoading();
			uni.request({
				url: _this.$API.gridSafeDutySubList,
				data: {id: _this.id},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					let data = res.data.data;
					
					// 处理部门员工信息
					_this.childDept = data.childDept;
					_this.localDept = data.mydeptUser;
				},
				fail: ()=>{
					uni.hideLoading();
				}
			})
		},
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}

/*卡片容器*/
.card-box{
	padding: 20upx 20upx 2upx;
	background: #fff;
	margin-top: 30upx;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}
.card-box-content{
	padding-top: 10upx;
}

/*卡片*/
.card{
	margin-bottom: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card.danger{
	background: #fff;
	margin: 0 20upx 20upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card .item text{
	color: #999;
	margin-right: 40upx;
}
.card .btn{
	padding: 0;
	color: #fff;
	width: 120upx !important;
	height: 60upx;
	font-size: 26upx;
	line-height: 60upx;
	border-radius: 6upx;
	text-align: center;
	background-color: #F98202;
	position: absolute;
	bottom: 30upx;
	right: 20upx;
}
</style>
